<template>
  <div>
    <div class="top">
      <div
          @click="change(item)"
          class="items-top"
          :class="{active:active===item.id}"
          v-for="(item,index) in list"
          :key="index">
        <img :src="item.imgUrl" alt="">
        <p>{{ item.name }}</p>
      </div>
    </div>
    <div class="bottom">
      <div class="btn-img" v-if="tableData.length<1">
        <img  src="@/assets/images/img_search_result.png" alt="">
      </div>
      <van-list
          v-else
          style="width: 100%;"
          v-model:loading="loading"
          :finished="finished"
          finished-text="Finished"
          loading-text="loading"
          error-text="error"
          @load="onLoad"
      >
        <div class="box-1"
             ref="boxForm"
             @click="submit(item,index)"
             v-for="(item,index) in tableData"
             :key="index">
          <div class="left">
            <b>${{item.money}}</b>
            <span>
            {{ item.name }}
          </span>
          </div>
          <div class="btn">
            <img :src="item.url" alt="">
          </div>
        </div>
      </van-list>

      <dz-safe></dz-safe>
    </div>

  </div>
</template>

<script>
import {addTaskOrder, getLikeTaskList, getLikeTaskTypeList} from "@/api/apiFox";
import {Toast} from "vant";

  export default {
    props:['navList'],
    data(){
      return{
        active:1,
        form:{},
        list:[],
        tableData:[],
        targetIndex:null,
        finished: false,
        loading: false,
        queryParams:{
          pageSize:10,
          pageNo:1,
          taskType: ""
        },
      }
    },
    methods:{
      change(item){
        this.active = item.id
        this.form = item
        this.tableData=[]
        this.queryParams.pageNo=1
        this.queryParams.taskType = item.name
        this.getList()
        this.finished = false
      },
      getLists(){
        getLikeTaskTypeList().then(res=>{
          this.list = res
          if (res && res.length>0){
            this.active = res[0].id
            this.form = res[0]
          }
          this.queryParams.taskType = this.form.name
          this.getList()
        }).catch(err=>{})
      },

      getList(){
        let self = this;
        Toast.loading({duration:200,message:this.$t('Loading')})
        getLikeTaskList(this.queryParams).then(res=>{
          self.tableData = [...self.tableData,...res];
          self.loading = false;
          if (res.length<1){
            self.finished = true
          }
        }).catch(err=>{
          console.log(err)
        })
      },
      onLoad() {
        let self = this;
        self.loading=true;
        self.queryParams.pageNo++;
        setTimeout(()=>{
          self.getList(this.queryParams)
        },500)
      },

      submit(item,index){

        this.$refs.boxForm[index].classList.add('animated');
        this.list = this.list.filter(value => {return value.id !== item.id})
        setTimeout(()=>{
          let form = {taskId: item.id, title: item.title, url: item.url}
          addTaskOrder(form).then(res=>{
            this.getList()
            this.$refs.boxForm[index].classList.remove('animated');
          }).catch(err=>{
            this.$refs.boxForm[index].classList.remove('animated');
          })
        },600)
      }
    },
    mounted() {
      this.getLists()
    }
  }
</script>

<style scoped lang="scss">
.top{
  width: 100%;
  height: 100px;
  display: flex;
  overflow-x: auto;
  /* 隐藏滚动条 */
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  padding:0 3%;
  box-sizing: border-box;
  margin-top: 20px;
  .items-top{
    width: 109px;
    display: inline-block;
    flex-grow: 0;
    flex-shrink: 0;
    height: 92px;
    background: #FFFFFF;
    box-shadow: 0px 4px 4px 0px rgba(160,58,58,0.25);
    border-radius: 70px 70px 70px 70px;
    margin-right: 10px;
    text-align: center;
    img{
      width: 40px;
      height: 40px;
      margin-top: 15px;
      object-fit: cover;
    }
    p{
      width: 100%;
      text-align: center;
      font-weight: bold;
      font-size: 14px;
      color: #533DF1;
      line-height: 14px;
      font-style: normal;
      text-transform: none;
    }
  }
  .active {
    width: 109px;
    height: 92px;
    background: linear-gradient( 180deg, #FF72B6 0%, #F13D3D 100%);
    box-shadow: 0px 4px 4px 0px rgba(160,58,58,0.25);
    border-radius: 70px 70px 70px 70px;
    p{
      color: #fff;
    }
  }
}
.bottom{
  width: 100%;
  margin-top: 10px;
  min-height: 600px;
  background: linear-gradient( 180deg, #FFF0C9 0%, #D49188 100%);
  border-radius: 30px 30px 0px 0px;
  padding: 20px 16px;
  box-sizing:border-box;
  .btn-img{
    width: 100%;
   display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    img{
      width: 200px;
    }
  }
  .box-1{
    width: 100%;
    height: 58px;
    background: #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    .left{
      width: 80%;
      height: 58px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      box-sizing: border-box;
      b{
        font-size: 20px;
        color: #5A4CBB;
        font-weight: 600;
      }
      span{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 400;
        font-size: 16px;
        color: #242B35;
      }
    }
    .btn{
      width: 54px;
      height: 58px;
      background: #FF8A8A;
      border-radius: 0px 10px 10px 0px;
      display: flex;
      justify-content: center;
      align-items: center;
      img{
        height: 40px;
        width: 40px;
        object-fit: cover;
      }
    }
  }
  .animated{
    animation: linear 0.4s moveItem;
  }
  @keyframes moveItem {
     0%{
       transform: translateX(0px);
     }
    100%{
      transform: translateX(500px);
    }
  }
}
</style>